<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" :continuous-zoom="true" :pinch-to-zoom="true" >
    <!-- 缩放大小控件 -->
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <!-- 自定义定位 -->
    <bm-control anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :offset="offset"> 
      <i class="iconfont icon-dingwei1" @click="dingwei"></i>
    </bm-control>
    <!-- 缩放控件 -->
	<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    <!-- 充电桩点位标记只能h5浏览器展示 -->
    <!-- <bm-point-collection :points="places" shape="BMAP_POINT_SHAPE_WATERDROP"  @click="clickHandler"></bm-point-collection> -->
    <!-- 定位图标 -->
    <bm-marker :position="myposition"></bm-marker>
    <bm-marker :position="point" v-for="point in places" :key="point.name" :icon="{url: pic, size: {width: 40, height: 40}}" @click="pointMsg(point)"></bm-marker>
    <van-action-sheet v-model="show">
        <div class="content">
            <ChargeStationCard :point="point" :distance="distance" :myposition="myposition" />
        </div>
    </van-action-sheet>
    <!-- 步行导航 -->
    <bm-walking :start="walkstart" :end="walkend" :panel="false"></bm-walking>
  </baidu-map>
</template>

<script>
	//高德

// import AMapLoader from '@amap/amap-jsapi-loader';
import ChargeStationCard from "@/components/ChargeStationCard/ChargeStationCard.vue"
import {gcj2bdString,WGS84toBD09} from '@/tool';
import {get_chargeStation} from '@/api/index';
export default {
    name: 'MapContainer',
    props: {
    
    },
    components:{
        ChargeStationCard
    },
    data(){
        return{
            pic: require("@/assets/充电桩.png"),
            zoom: 10,
            center:{lng: 113.27324, lat: 23.15792},  //广州坐标
            BMap:null,
            map:null,
            offset:{width: 30,height: 70},     //自定义定位图标偏移
            places:[],       //充电桩位置信息
            myposition:{lng: 0, lat: 0}, //我的位置
            show: false, // 显示充电桩卡片
            point: null, //充电桩信息
            count:0,
            walkstart:{lng: 0, lat: 0}, //所在位置用于导航
            walkend:{lng: 0, lat: 0},  //去往位置用于导航
            distance:null,  //所在位置和充电桩距离
        } 
    },
    computed:{
       
    },
    async created(){
        
    },
	mounted(){
        
	},
    watch:{
        BMap(){
            //先定位到所在位置
            if (window.plus) {
                this.plusReady()
            } else {
                document.addEventListener('plusready', this.plusReady, false)
            }
            //再充电点位标记
            
        }
    },
    methods:{
        // 扩展API准备完成后要执行的操作
		plusReady(){
			const self = this
			// console.log("plusReady--", plus.geolocation)
            //wgs84 gps坐标系
            plus.geolocation.getCurrentPosition(
                async function (p) {
                    //初始化中心点和地图级别
                    self.zoom = 17
                    var center={lng:p.coords.longitude,lat:p.coords.latitude};
                    console.log('center.lng,center.lat',center.lng,center.lat);
                    var new_center = WGS84toBD09(center.lng,center.lat);
                    // var new_center = gcj2bdString(center)
                    console.log('new_center.lng,new_center.lat',new_center.lng,new_center.lat);
                    self.myposition = {...new_center};
                    self.walkstart = {...new_center}
                    self.center = {...new_center};
                    self.$store.commit('changeMyPosition', self.center)
                    // 获取数据库数据用于展示充电点
                    let res = await get_chargeStation(center);
                    let chargeStation = res.data.chargeStation;
                    //gcj2bdString转换成百度坐标系
                    let new_place =[];
                    chargeStation.slice(0,10).forEach(place => {
                        new_place.push( gcj2bdString(place) )
                    });
                    self.places = new_place;
                },
                function (err) {
                    console.log("onPlusReady--err", err);
                }
            );
		},
		handler({BMap, map}){
            this.BMap = BMap;
            this.map = map;
        },
        async dingwei(){
            //添加点
            if(this.count == 0){
                if (window.plus){
                    this.plusReady()
                }
                else{
                    var center=this.$store.state.myPosition;//凌塘村位置
                    this.myposition = {...center};  //我的定位
                    this.walkstart = {...center}   //步行导航起点
                    this.center = {...center};
                    this.zoom = 17
                }
            }
            else{
                var point = new this.BMap.Point(this.$store.state.myPosition.lng,this.$store.state.myPosition.lat);
                /* var point = new this.BMap.Point(113.405616,23.178489);  //凌塘村位置
                this.map.addOverlay(new this.BMap.Marker(point));
                this.map.setCenter(point);
                this.map.centerAndZoom(point, 17); */
                //定位到中心点
                /* var center={lng:113.405616,lat:23.178489};
                this.center = {...center};
                this.zoom = 17 */
                this.map.panTo(point, false)
            }
            this.count++;

            // 获取数据库数据用于展示充电点
            let res = await get_chargeStation(this.$store.state.myPosition);//gcj02坐标
            // console.log(res);
            let chargeStation = res.data.chargeStation;
            //gcj2bdString转换成百度坐标系
            let new_place =[];
            chargeStation.slice(0,10).forEach(place => {
                new_place.push( gcj2bdString(place) )
            });
            this.places = new_place;
            //gcj02_to_bd09转换成百度坐标系最多10个
            /* var points=[];
            chargeStation.slice(0,10).forEach(place => {
                points.push(new this.BMap.Point(place.lng,place.lat));
            });
            tranform(points,this.BMap); */
        },
        pointMsg(point){
            // console.log(point);
            this.point = point;
            this.walkend = {lng:point.lng,lat:point.lat}
            this.show = true;
            //获取两点之间的距离
            var start_point = new this.BMap.Point(this.walkstart.lng,this.walkstart.lat);
            var end_point = new this.BMap.Point(this.walkend.lng,this.walkend.lat);
            let distance = Math.round(this.map.getDistance(start_point, end_point));
            this.distance = (distance/1000).toFixed(2)+"km";
        }
    },
    
}
</script>

<style scoped lang="less">
.map {
  width: 100%;
  height: 100vh;
//   height: 400px;
    .icon-dingwei1{
        font-size: 25px;
        background-color: white;
        border-radius: 50%;
    }
    .content {
        padding: 16px 16px;
        // text-align: left;
    }
    .van-popup--bottom {
        bottom: 60px;
        left: 5%;
        width: 90%;
        z-index: 99 !important;
    }
    .van-popup--bottom.van-popup--round {
        border-radius: 16px;
    }
}
</style>
